@import '../style/mixins/index';
@import '../style/theme/color';
@import '../style/theme/shadow';

.devui-toast {
  position: fixed;
  top: 50px;
  right: 20px;
  width: 20em;
  word-break: normal;
  word-wrap: break-word;
}

.devui-toast-item-container {
  position: relative;
  left: 150%;
  margin: 0 0 10px 0;
  opacity: 0.95;
  filter: alpha(opacity=95);
  box-shadow: $hwc-shadow-3;
  border-radius: 4px;
  color: $hwc-feedback-overlay-font-color;
  transition: all 0.3s;
  background-color: $huawei-bg;

  &.slide-in {
    left: 0;
  }
}

.devui-toast-item {
  position: relative;
  display: block;
  padding: 12px 16px;
}

.devui-toast-item p {
  padding: 0;
  margin: 0;
}

.devui-toast-icon-close {
  position: absolute;
  top: 7px;
  right: 10px;
  cursor: pointer;

  .devui-toast-close-icon {
    fill: $font-white;
  }
}

.devui-toast-title {
  font-size: 14px;
  padding: 0 0 0.5em 0;
  display: block;
  font-weight: 700;
}

.devui-toast-image {
  position: absolute;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: 16px;
  top: 14px;
  padding: 0;

  &.devui-toast-image-warning {
    path.devui-icon-warning-outer {
      fill: $hwc-status-warning-border;
    }

    path.devui-icon-warning-inner {
      fill: $font-white;
      stroke: $font-white;
    }
  }

  &.devui-toast-image-info {
    background-color: $status-blue;
  }

  &.devui-toast-image-error {
    background-color: $status-red;
  }

  &.devui-toast-image-success {
    background-color: $status-green;
  }

  .devui-toast-image-info-path,
  .devui-toast-image-error-path,
  .devui-toast-image-success-path {
    fill: $font-white;
  }
}

.devui-toast-message {
  margin-left: 20px;
}

.devui-toast-message-common .devui-toast-message {
  margin-left: 0;
}

.devui-toast-message p {
  font-size: 12px;
}
